Add mobile framework and version selector to doc pages#367
Merged
Conversation
On mobile there was no visible way to switch frameworks: the only path was the easy-to-miss 'Back to main menu' link in the hamburger, behind an entry labeled 'SDKs', and its links dropped users on the add-sdk page instead of keeping the page they were reading. - Add an in-page framework + version selector (homepage pill style) at the top of doc pages, shown below 768px. Switching keeps the current page and version; Xamarin entries only appear on legacy versions. - On tablets (768-996px) show the existing navbar version/framework dropdowns next to the search instead of the in-page selector. - Extract the desktop dropdown's path-preserving link logic into a shared useFrameworkItems hook; the mobile SDKs dropdown now also keeps the current page when switching. - Hide breadcrumbs and the 'Back to main menu' button on mobile; the sidebar already highlights the open page. - Reduce mobile doc content top padding (48px -> 16px). - Fix homepage framework selector dropdown being painted over by the SkillsCallout (z-index).
ilber
reviewed
Jun 11, 2026
ilber
reviewed
Jun 11, 2026
ilber
reviewed
Jun 11, 2026
- Guard against getVersionMainDoc returning undefined; fall back to "/" instead of throwing on .path. - Compare version by name, not reference: v (useVersions) and activeVersion (useActiveDocContext) are from different hooks, so the active-version highlight never matched. - Comment why sidebarId is dropped from docsVersion items (explicit page-preserving `to` would otherwise lose to sidebar main-doc resolution).
ilber
approved these changes
Jun 15, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
Feedback from Jenny: on mobile it's difficult or impossible to switch frameworks without going back to the homepage. We deep-link to framework-level pages from the corp site and ~50% of that traffic is mobile.
The only existing path was the easy-to-miss ← Back to main menu link in the hamburger, behind an entry labeled SDKs (nothing says "framework"), and its links dropped users on the Installation page instead of keeping the page they were reading.
What
Phones (<768px) — an in-page framework + version selector, styled like the homepage one, at the top of every doc page (above "On this page"):
/sdks/android/id-capture/intro→/sdks/ios/id-capture/intro); pages that don't exist in the target framework fall back via the existing NotFound redirect, same as desktop today.Tablets (768–996px) — the existing navbar version/framework dropdowns are shown next to the search (they were CSS-hidden below 997px); the in-page selector is hidden in this range. Dropdowns open on tap.
Desktop (≥997px) — unchanged.
Also:
useFrameworkItemshook (theDropdownNavbarItemoverride shrinks by ~190 lines, identical behavior). The mobile SDKs dropdown entries now also keep the current page.src/theme/DocItem/Layoutis a faithful copy of the stock component with one added line (selector above the mobile TOC).Notes for reviewers
navbar-sidebar.scssif we want them back.Testing
yarn typecheckandyarn buildpass.